<template>
    <div>
        <Table :columns="taskCol" :data="row" style="margin-top: 15px;"></Table>

        <Modal
            v-model="taskModel" width="1000"
            :mask-closable="false"
            :footer-hide="true" 
            title="任务列表">
            <Table :columns="taskDataCol" :data="taskList" style="margin-top: 15px;"></Table>
        </Modal>
        <!-- 修改最终得分 -->
        <Modal
            v-model="modifyModel" width="500"
            :mask-closable="false"
            :footer-hide="true" 
            title="修改得分">
            <Form ref="formV" :model="formV" :rules="formVRule" :label-width="80">
                <FormItem label="分值" prop="score">
                    <InputNumber :max='300' :min='0' v-model="formV.score" :step="1"></InputNumber>
                </FormItem>
                <FormItem label="评分理由" prop="content" >
                    <Input style="width: 300px;font-size: 12px;vertical-align: top;" v-model="formV.content" type="textarea" 
                    :autosize="{minRows: 2,maxRows: 5}" placeholder="长度不超过200" 
                     :maxlength="200"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="submitBtn('formV')" :loading='modelLoading'>确定</Button>
                    <Button @click="modifyModel = false" style="margin-left: 8px">取消</Button>
                </FormItem>
            </Form>
        </Modal> 
    </div>
</template>    
<script>
    import {modifyScore} from '@/api/train.js'
    export default {
        props: {
            row: Array
        },
        data(){
            const validateScore = (rule, value, callback)=>{
                let v = parseInt(value)
                if(v < 0){
                    callback(new Error('任务分值不能为负数'));
                }else if(v > 300){
                    callback(new Error('任务分值范围为0—300'));
                }else{
                    callback();
                }
            }
            return {
                testId:this.$route.query.testId,
                taskCol:[
                    {
                        type: 'index',
                        width: 60,
                    },
                    {
                        title: '任务名称',
                        key: 'name'
                    },
                   
                    {
                        title: '任务顺序',
                        key: 'taskOrder'
                    },
                    {
                        title: '分值',
                        key: 'score'
                    },
                    {
                        title: '任务类型',
                        key: 'taskType'
                    },
                    {
                        title: '任务内容',
                        key: 'content',
                        render: (h, params) => {
                            return h('p', {
                                domProps:{
                                    innerHTML:params.row.content
                                }
                            })
                        }
                    },
                    {
                        title: '任务难度',
                        key: 'level',
                        render: (h, params) => {
                            let text = ''
                            if(params.row.level === 'simple'){
                                text = '简单'
                            }else if(params.row.level === 'middle'){
                                text = '中等'
                            }else if(params.row.level === 'hard'){
                                text = '困难'
                            }
                            return h('div',text)
                        }
                    },
                    {
                        title: '创建者',
                        key: 'creatorName'
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '查看提交',
                        key: 'subTask',
                        render:(h,params)=>{
                            return h('Button',{
                                on:{
                                    'click':()=>{
                                        this.showTaskListBtn(params.row)
                                    }
                                }
                            },'查看')
                        }
                    },
                ],
                taskModel:false,
                taskList:[],
                taskDataCol:[
                    {
                        title: '提交人',
                        key: 'userName'
                    },
                    {
                        title: '任务名称',
                        key: 'taskName'
                    },
                    {
                        
                        title: '提交内容',
                        key: 'commitContent',
                        render: (h, params) => {
                            return h('p', {
                                domProps:{
                                    innerHTML:params.row.commitContent
                                }
                            })
                        }
                    },
                    {
                        title:'验证状态',
                        key:'validateState',
                        align: 'center',
                        render:(h,params)=>{
                            let text = ''
                            if(params.row.validateState === 0){
                                text = '未验证'
                            }else if(params.row.validateState === 1){
                                text = '成功'
                            }else if(params.row.validateState === 2){
                                text = '失败'
                            }
                            return h('div',text)
                        }
                    },
                    {
                        title:'答对数量',
                        key:'correctCount',
                        align: 'center',
                    },
                    {
                        title:'正确率',
                        key:'accuracy',
                        align: 'center',
                    },
                    {
                        title:'最终得分',
                        key:'finalScore',
                        align: 'center',
                    },
                    {
                        title:'提交时间',
                        key:'commitTime',
                        align: 'center',
                    },
                    {
                        title:'修改最终得分',
                        key:'modify',
                        align: 'center',
                        render:(h,params)=>{
                            let flag = true
                            if(params.row._index === 0){
                                flag = false
                            }
                            return h('Button',{
                                props: {
                                    disabled:flag
                                },
                                on:{
                                    'click':()=>{
                                        this.modifyScore(params.row)
                                    }
                                }
                            },'修改')
                        }
                    },
                ],
                modifyModel:false,
                modelLoading:false,
                _index:0,
                formV:{
                    score:0,
                    content:'',
                },
                formVRule:{
                    score: [
                        { required: true,validator: validateScore,},
                    ],
                    content: [
                        { required: true,min:0,max: 200, message: '长度不超过200', trigger: 'change' },
                    ],
                },
                currentSubData:{},
            }
        },
        methods:{
            showTaskListBtn(row){
                if(row.userTaskList.length == 0){
                    this.$Message.info({
                        content:'暂无提交',
                        duration:5,
                    })
                    return false
                }
                this.taskList = row.userTaskList
                this.taskModel = true
            },
            modifyScore(row){
                // if(row.validateState == 0){
                //     this.$Message.info({
                //         content:'本次提交尚未验证，无法修改得分',
                //         duration:5,
                //     })
                // }
                this.currentSubData = row
                this.formV.score = row.finalScore
                this._index = row._index
                this.modifyModel = true
            },
            submitBtn(name){
                this.$refs[name].validate((valid) =>{
                    if(valid){
                        let data = {
                            "content": this.formV.content,
                            "finalScore": this.formV.score,
                            "taskId": this.currentSubData.taskId,
                            "teamId": this.currentSubData.teamId,
                            "testId": this.testId,
                            "trainingId": this.currentSubData.trainingId,
                            "userId": this.currentSubData.userId,
                            "userTaskId": this.currentSubData.id,
                        }
                        this.modelLoading = true
                        modifyScore(data)
                        .then(res=>{
                            if(res.data.code === 1){
                                this.$Message.success({
                                    content:'修改成功',
                                    duration:3,
                                })
                                this.$set(this.taskList[this._index],'finalScore',this.formV.score)
                                this.modifyModel = false
                            }else{
                                this.$Message.error({
                                    content:res.data.message,
                                    duration:5,
                                })
                            }
                            this.modelLoading = false
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                    }else{
                        this.$Message.error('请完善信息！');
                    }
                })
            },
        }
    };
</script>
<style scoped>
    .expand-row{
        margin-bottom: 16px;
    }
</style>